<template>
  <div class="sneaker-mall">
    <!-- 顶部 -->
    <v-header :showback="true" :bg="dark" v-if="!$root.ISAPP">
      <div class="nav-tab2 ellipsis">{{title}}</div>
    </v-header>
    <div v-if="!hasdata" class="empty">
      <p>未加载到活动~</p>
      <button @click="goHome">去逛逛</button>
      <!-- <router-link to="/sneaker/mall" tag="button" replace></router-link> -->
    </div>
    <template v-else-if="hasdata==1">
      <div class="info_box" v-if="drawlotInfo">
        <div class="info">
          <div class="img_box">
            <img :src="drawlotInfo.image" alt>
          </div>
          <h3>{{drawlotInfo.productname}}</h3>
          <h2>
            <img src="/static/img/bull/iconSprit.png">
            <span>超低价预售</span>
            <img src="/static/img/bull/iconSprit.png">
          </h2>
        </div>
        <div class="ticket_box">
          <div class="ticket_left">
            <p class="tit">斗牛发售价</p>
            <p class="now_price">
              <span>￥</span>
              <em class="font-price">{{drawlotInfo.price}}</em>
            </p>
            <p class="agora_price">
              <span>市场价:</span>
              <em class="font-price">￥{{drawlotInfo.saleprice}}</em>
            </p>
          </div>
          <div class="ticket_right">
            <p>本场发售{{drawlotInfo.num}}张预售券</p>
            <p>抢到即可转卖</p>
            <div class="ticket_right_bottom">
              <label>尺码随机</label>
              <div class="One-dimensional-code">
                <img src="/static/img/bull/barCode.png">
              </div>
            </div>
          </div>
        </div>
        <div class="ticket_explain">
          <p class="tit">斗牛球鞋券说明</p>
          <p class="explain">1.获得专属购买码才能参与斗牛预售球鞋券购买资格</p>
          <p class="explain">2.只有群内成员才能获得购买码，关注「斗牛APP」微信公众号，聊天框发送「{{bullInfo}}」进群。</p>
          <!-- <p class="explain">
            <em class="wId" id="copyWId">{{drawlotInfo.number}}</em>
            <em class="copyBtn2" @click="copy()" :data-clipboard-text="drawlotInfo.number">复制</em>
          </p> -->
          <p class="explain">3.预售鞋券可在【斗牛DoNew】APP 球鞋频道“预售鞋券买卖区”进行自由转让，到期可提货。</p>
          <p class="explain">4.本活动最终解释权归斗牛平台所有</p>
        </div>
      </div>
      <div class="btn_box fix-btm">
        <p v-if="isStart" class="start" @click="nowRob()">马上抢！先到先得</p>
        <div v-else class="btn_box">
          <p class="unStart">
            还差
            <span>{{timeData}}</span>开始
          </p>
          <p class="getCodeBtn" @click="getProCode()">获取购买码</p>
        </div>
      </div>
      <ticket-model @get-code="getProCode" @call-identify="callIdentify" @pay-ok="goPayOk"></ticket-model>
    </template>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { FormatSeconds } from "@/common/util";
import TicketModel from "@/comps/bull/sneakerticket/detail_pop";
import { Activityinfo, Getcode } from "../../../common/api/bull";
import Clipboard from "clipboard";

var loader;
export default {
  components: { TicketModel },
  data() {
    return {
      title: "预售抢购",
      hasdata: 2,
      drawlotInfo: {},
      isStart: false,
      timeData: "",
      startRobTime: "", //开始抢的时间
      clearTime: null,
      code: "",
      bullInfo:''
    };
  },
  computed: {
    ...mapGetters({ user: "userInfo" }),
    notloged() {
      return !(this.user && this.user.uid);
    }
  },
  beforeDestroy() {
    document.body.classList.remove("lock");
  },
  mounted() {
    let _ = this;
    _.setToolBar({ title: _.title });

    window.callbacklogin = json => {
      if (json) {
        _.getQueryParamUser(json);
        _.toast("登录成功，请重新操作~");
      } else _.toast("获取登录信息失败~");
    };

    window.callbackIdentify = (result, via) => {
      console.log("callbackIdentify res------>>>", result, via);
      loader.close();
      if (result == 1) {
        _.toast("认证成功~");
        _.$router.push("/sneakerticket/result?code=" + _.code);
      } else _.toast("认证失败~");
    };
    if (_.$root.ISAPP) {
      _.getQueryParamUser();
    }
    _.handleInit();
  },
  created() {},
  methods: {
    callAppLogin() {
      this.javascriptBridge({
        name: "callAppLoginPage",
        params: { callbackname: "callbacklogin" }
      });
    },
    callIdentify(res) {
      console.log("callIdentify res", res);
      this.code = res;
      loader = this.loading("认证中...");
      setTimeout(loader.close, 5000);

      // 自测可用下面代码
      // window.callbackIdentify(1, "ios");
      // return
      this.javascriptBridge({
        name: "callAppIdentifyAccountWithParams",
        params: { callbackname: "callbackIdentify" }
      });
    },
    goPayOk(res) {
      this.$router.push("/sneakerticket/result?status=2&code=" + res);
    },
    goHome() {
      let _ = this;
      if (_.$root.ISAPP) {
        _.javascriptBridge({
          name: "gotoAppMallCenterPage",
          params: { type: 0 }
        });
      } else _.$router.push("/sneaker/mall");
    },
    handleInit() {
      let _this = this;
      Activityinfo()
        .then(res => {
          _this.drawlotInfo = res;
          _this.startRobTime = _this.drawlotInfo.begintimesecond;
          //   if (_this.startRobTime > 0) {
          //     _this.isStart = false;
          //   } else {
          //     _this.isStart = true;
          //   }
          _this.bullInfo = res.info || '牛货'
          _this.isStart = _this.startRobTime <= 0;
          if (!_this.isStart) {
            _this.endTime();
          }
          _this.hasdata = 1;
        })
        .catch(e => {
          console.error("Activityinfo error: ", e);
          _this.toast(e && e.msg ? e.msg : "");
          _this.hasdata = 0;
        });
    },
    //   倒计时
    endTime() {
      let _this = this;
      $timer(
        function(timer, count) {
          if (!_this.isStart) {
            _this.startRobTime--;
            _this.timeData = FormatSeconds(_this.startRobTime);
            if (_this.timeData === "end") {
              _this.isStart = true;
              clearTimeout(timer);
            }
          }
        },
        1000,
        1
      );
    },
    // 复制客服微信号到剪切板
    copy() {
      let _this = this;
      var clipboard = new Clipboard(".copyBtn2");
      _this.toast("已复制到剪贴板!");
    },
    // 马上抢
    nowRob() {
      let _ = this;
      if (_.$root.ISAPP) {
        if (_.notloged) _.callAppLogin();
        else {
          _.$root.Bus.$emit("tell_child_showInputProCodeBox");
          document.body.classList.add("lock");
        }
      } else _.loadApp("请前往【斗牛DoNew】APP参与活动~");
    },
    // 获取购买码
    getProCode() {
      let _this = this;
      // 判断登录
      if (_this.notloged) {
        if (_this.$root.ISAPP) _this.callAppLogin();
        else _this.$router.push("/login");
        return;
      }
      Getcode({ groupid: "" })
        .then(res => {
          if (res.status === 1) {
            let serveInfo = res;
            _this.$root.Bus.$emit("tell_child_showUnGroupBox", serveInfo);
            document.body.classList.add("lock");
          }
        })
        .catch(e => {
          _this.toast(e && e.msg ? e.msg : "");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.empty {
  text-align: center;
  padding-top: 20vh;

  p {
    color: #999;
    margin: 20px;
  }
  button {
    display: inline-block;
    color: #fff;
    font-size: 15px;
    background: #333;
    padding: 5px 30px;
    border-radius: 2px;
  }
}
.info_box {
  padding: 0 4vw 24px;
  background: #fcfcfc;
}
.info {
  padding-top: 15px;
  .img_box {
    width: 240px;
    height: 160px;
    margin: 0 auto;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  h3 {
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    font-weight: Semibold;
    color: #232323;
    margin-bottom: 10px;
  }
  h2 {
    line-height: 28px;
    font-size: 20px;
    font-weight: Semibold;
    color: #232323;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 14.5vw;
    span {
      width: 194px;
      text-align: center;
    }
    img {
      display: inline-block;
      width: 22px;
      height: 9px;
    }
  }
}
.ticket_box {
  width: 100%;
  height: 124px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(200, 200, 200, 0.5);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  .ticket_left {
    width: 35%;
    height: 104px;
    border-right: 1px dashed rgba(220, 220, 220, 1);
    padding: 15px 0;
    .tit {
      height: 17px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(35, 35, 35, 1);
      line-height: 17px;
      margin-bottom: 6px;
    }
    .now_price {
      position: relative;
      height: 24px;
      margin-bottom: 15px;
      span {
        position: absolute;
        top: 0;
        left: -6px;
        height: 24px;
        font-size: 32px;
        font-weight: 600;
        color: rgba(35, 35, 35, 1);
        line-height: 24px;
      }
      em {
        height: 24px;
        font-size: 32px;
        font-weight: bold;
        color: rgba(35, 35, 35, 1);
        line-height: 24px;
        padding-left: 20px;
      }
    }
    .agora_price {
      span {
        height: 17px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(100, 100, 100, 1);
        line-height: 17px;
      }
      em {
        height: 20px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(100, 100, 100, 1);
        line-height: 20px;
      }
    }
  }
  .ticket_right {
    width: 65%;
    height: 104px;
    padding: 15px 0 0 25px;
    p {
      height: 21px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(35, 35, 35, 1);
      line-height: 21px;
    }
    .ticket_right_bottom {
      height: 44px;
      display: flex;
      align-items: flex-end;
      label {
        flex: 1;
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(100, 100, 100, 1);
        line-height: 17px;
      }
      .One-dimensional-code {
        width: 60px;
        height: 24px;
        img {
          display: block;
          width: 60px;
          height: 24px;
        }
      }
    }
  }
}
.ticket_explain {
  padding-top: 20px;
  padding-bottom: 70px;
  .tit {
    line-height: 20px;
    font-size: 14px;
    color: #232323;
    font-weight: Semibold;
    margin-bottom: 20px;
    text-align: center;
  }
  .explain {
    line-height: 24px;
    font-size: 12px;
    color: #787878;
    .wId {
      font-size: 13px;
      font-weight: 600;
      color: #8d4fe0;
    }
    .copyBtn2 {
      display: inline-block;
      width: 35px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: #e9e9e9;
      margin-left: 5px;
      font-size: 10px;
    }
  }
}
.mb24 {
  margin-bottom: 24px;
}
.btn_box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 4vw;
  background: #fff;
  // height: 70px;
  display: flex;
  p {
    height: 50px;
    background: rgba(35, 35, 35, 1);
    border-radius: 2px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 50px;
    text-align: center;
    &.start {
      flex: 1;
    }
    &.unStart {
      background: rgba(150, 150, 150, 1);
      margin-right: 4vw;
      flex: 1;
    }
    &.getCodeBtn {
      width: 130px;
    }
  }
}
</style>

